<template>
  <div>
    <customDialog
      :title="`分配权限`"
      :dialogVisible="dialogVisible"
      @close="closeDialog(ruleFormRef)"
      @confirm="confirmDialog(ruleFormRef)"
      width="650"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-position="left"
          label-width="90px"
          class="form_box"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="数据范围" prop="dataScope">
                <el-select
                  v-model="formData.dataScope"
                  placeholder="请选择角色"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dataOption"
                    :key="index"
                    :label="item?.label"
                    :value="item?.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.dataScope === 'Visibility'">
            <el-col :span="24">
              <el-form-item label="选择用户" prop="targetUserIds">
                <el-select
                  v-model="formData.targetUserIds"
                  multiple
                  placeholder="请选择角色"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in userOption"
                    :key="index"
                    :label="item?.name"
                    :value="item?.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import {
  getUserPower,
  setUserPower,
  getUserList,
} from "@/api/userManage/index";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "lodash-es";

const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const form = {
  id: 0,
  dataScope: "Self",
  targetUserIds: <any>[],
};
const formData = ref(Object.assign({}, form));

// 剧集
const dataOption = ref<Array<any>>([
  { label: "全部", value: "All" },
  { label: "仅自己", value: "Self" },
  { label: "同步其他用户数据", value: "Visibility" },
]);
const userOption = ref<Array<any>>([]);

const rules = reactive({
  dataScope: [{ required: true, message: "请选择数据范围", trigger: "change" }],
  targetUserIds: [{ required: true, message: "请选择用户", trigger: "change" }],
});

// 关闭
const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl?.resetFields();
  Object.assign(formData.value, form);
  dialogVisible.value = false;
};

// 成功
const emit = defineEmits(["success"]);
const confirmDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      setUserPower(formData.value).then(() => {
        ElMessage.success(`分配成功`);
        dialogVisible.value = false;
        emit("success");
        closeDialog(ruleFormRef.value);
      });
    }
  });
};

// 获取用户列表
const getUser = (data: Record<string, any>) => {
  getUserList({ currentPage: 1, pageSize: 1000 }).then(
    (res: Record<string, any>) => {
      userOption.value = res.data?.list.filter((item: Record<string, any>) => {
        // 过滤自身
        if (item.id !== data.id) {
          return {
            name: item.name,
            id: item.id,
          };
        }
      });
    }
  );
};

// 获取用户权限数据
const getPower = (id: number) => {
  getUserPower(id).then((res: Record<string, any>) => {
    formData.value.dataScope = res.dataScope;
    if (!res?.targetUsers) return (formData.value.targetUserIds = []);
    formData.value.targetUserIds = res?.targetUsers.map(
      (item: Record<string, any>) => {
        return item?.userId;
      }
    );
  });
};

// 父级电子显示dialog
const showDialog = async (val: any) => {
  console.log("显示用户信息弹窗----", val);
  dialogVisible.value = true;

  if (val) {
    getUser(val);
    formData.value.id = val.id;
    getPower(val.id);
  }
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.form_box {
  padding: 0 20px;
}
</style>
